<template>
  <div class="background">
    <div class="big-contain">
      <el-scrollbar class="scrollbar">
        <div class="survey">
          <h2>{{this.surveyInfo.title}}</h2>
          <p style="text-decoration: #666666">{{this.surveyInfo.introduction}}</p>
          <div style="border:1px solid #CCC;width: 80%"></div>
          <el-form  style="width: 60%" >
            <div class="item" v-for="(item, index) in this.questionArray" :key="index">
              <el-form-item :label="(index+1)+'、'" >
                <div class="item_title">
                  <span v-if="item.type==0">[单选]</span>
                  <span v-if="item.type==1">[文本]</span>
                  <span v-if="item.type==2">[多选]</span>
                  <span v-text="item.questionContent"></span>
                  <span v-if="item.must == 1" style="text-decoration: red">*（必答）</span>
                </div>

                <!-- 单选 -->
                <div v-if="item.type == 0 ">
                  <el-radio-group v-model="item.choiceContent[0]" style="display: flex;flex-direction: column">
                    <el-radio
                      :label="index1"
                      :key="index1"
                      v-for="(em,index1) in item.optionContent" style="margin-left: 20px;margin-bottom: 15px"
                    >{{ em }}</el-radio>
                  </el-radio-group>
                </div>

                <!-- 多选 -->
                <div v-if="item.type == 2 ">
                  <el-checkbox-group v-model="item.choiceContent" style="display: flex;flex-direction: column">
                    <el-checkbox
                      :label="index2"
                      :key="index2"
                      v-for="(em,index2) in item.optionContent" style="margin-left: 20px">
                      {{em}}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>

                <!-- 矩阵填空 -->
                <div v-if="item.type == 1 ">
                  <div class="warp" >
                    <el-input type="textarea" v-model="item.textContent" style="margin-left: 20px"></el-input>
                  </div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
    </div>
    <div class="buttonbar">
      <button class="bbutton" @click="submit"> 提交</button>
      <button class="bbutton" @click="resetAnswer"> 重新填写</button>
      <button class="bbutton" @click="back"> 退出</button>
    </div>
<!--    <el-dialog-->
<!--      visible.sync="centerDialogVisible1"-->
<!--      title="提醒"-->
<!--      width="30%"-->
<!--      align-center-->
<!--    >-->
<!--      <span>将重置当前所有的填写，请确认</span>-->
<!--      <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="cancle">取消</el-button>-->
<!--        <el-button type="primary" @click="confirmDialog1">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--    <el-dialog-->
<!--      visible.sync="centerDialogVisible"-->
<!--      title="警告"-->
<!--      width="30%"-->
<!--      align-center-->
<!--    >-->
<!--      <span>您尚未提交，返回上一页将不会保存您的填写，请确认</span>-->
<!--      <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="cancle">取消</el-button>-->
<!--        <el-button type="primary" @click="confirmDialog">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </span>-->
<!--      </template>-->
<!--    调的过程中出现了问题-->
<!--    </el-dialog>-->
  </div>

</template>

<script>
import {answerSurvey, showSurvey} from "../../api/survey";

export default {
  name: "answerFinishQuestionnaire",
  data() {
    return {
      centerDialogVisible1:false,
      centerDialogVisible:false,

      answerId:'',
      surveyInfo: {
        id:'1',
        title: "对东北大学返校的问卷",
        introduction: "对东北大学返校的过程中的各种政策问题进行反馈",

      },
      questionInfo:{
        id: "1",
        questionContent: "对于返校你的满意程度",
        //0表示选择题，1表示文本题，2多选题
        type: 0,
        //0表示非必答，1表示必答
        must: 1,
        choiceContent:['不满意'],
        textContent:'',
        optionContent: [
          {
            option: "很满意"
          },
          {
            option: "不满意"
          }
        ]
      },
      questionArray: [
        // {
        //   id: "1",
        //   questionContent: "对于返校你的满意程度",
        //   //0表示选择题，1表示文本题，2多选题
        //   type: 0,
        //   //0表示非必答，1表示必答
        //   must: 1,
        //   choiceContent:['不满意'],
        //   textContent:'',
        //   optionContent: [
        //     {
        //       option: "很满意"
        //     },
        //     {
        //       option: "不满意"
        //     }
        //   ]
        // },
        // {
        //   id: "2",
        //   questionContent: "未返校的主要原因有",
        //   //0表示选择题，1表示文本题，2多选题
        //   type: 2,
        //   must: 1,
        //   choiceContent:['学校疫情过度防控'],
        //   textContent:'',
        //   optionContent: [
        //     {
        //       option: "学校疫情过度防控"
        //     },
        //     {
        //       option: "学校管理太拉，根本不想回"
        //     }
        //   ]
        // },
        // {
        //   id: "3",
        //   questionContent: "请说出你对学校防疫政策的评价",
        //   //0表示选择题，1表示文本题，2多选题
        //   type: 1,
        //   must: 0,
        //   choiceContent:['不满意'],
        //   textContent:'对学校的防疫政策不是很满意',
        //   optionContent: [
        //
        //   ]
        // },

      ],
      jsonItem : {
        questionId:'',
        choiceContent:[],
        textContent:''
      },
      answerContext:[]
    }
  },
  methods:{
    cancle(){
      this.centerDialogVisible1 = false
      this.centerDialogVisible = false
    },
    confirmDialog1(){
      let size = this.questionArray.length
      let i=0
      for(i=0;i<size;i++){
        this.questionArray[i].choiceContent = []
        this.questionArray[i].textContent = ''
      }

      this.centerDialogVisible1 = false

    },
    confirmDialog(){
      this.centerDialogVisible = false
      this.$router.back()
    },
    submit(){
      console.log("点击提交")
      let size = this.questionArray.length
      let allmustFill = true
      let i = 0
      for(i=0;i<size;i++){
        if(this.questionArray[i].must==1){
          if(this.questionArray[i].type==1){
            if(this.questionArray[i].textContent == ''){
              allmustFill = false
              this.$message.warning("存在必填项未完成，请完成！")
              return
            }
          }else {
            if(this.questionArray[i].choiceContent.length==0){
              allmustFill =false
              this.$message.warning("存在必填项未完成，请完成！")
              return
            }
          }
        }
      }

      let s = this.questionArray.length
      for(let i=0;i<s;i++){
        this.jsonItem.questionId = this.questionArray[i].id
        this.jsonItem.choiceContent = this.questionArray[i].choiceContent
        this.jsonItem.textContent = this.questionArray[i].textContent
        console.log(this.jsonItem)
        this.answerContext.push(JSON.parse(JSON.stringify(this.jsonItem)))
      }
      console.log("222")
      console.log(this.questionArray)
      console.log("111")
      console.log(this.answerContext)
      answerSurvey(this.answerId,this.surveyInfo.id,this.answerContext).then((response)=>{
        if(response.data.code == 200){
          console.log(response.data.data)
          this.$message.success("提交成功")
          this.$router.push({path:'/answerer/View'})
        }else {
          this.$message.warning(response.data.message)
          console.log(response.data)
        }
      })
    },
    resetAnswer(){
      console.log("重置")
      let size = this.questionArray.length
      let i=0
      for(i=0;i<size;i++){
        this.questionArray[i].choiceContent = []
        this.questionArray[i].textContent = ''
      }
      // this.centerDialogVisible1 = true
    },
    back(){
      console.log("返回")
      this.$router.back()
      // this.centerDialogVisible = true

    },
    getQuestionArray(){
      showSurvey(this.surveyInfo.id).then((response)=>{
        console.log("得到问卷的内容")
        console.log(response)
        if(response.data.code == 200){

          const questionBack = response.data.data.questionArray
          let size = questionBack.length
          let i=0
          for(i=0;i<size;i++){
            this.questionInfo.id = questionBack[i].id
            this.questionInfo.questionContent = questionBack[i].content
            this.questionInfo.type = questionBack[i].type
            this.questionInfo.must = questionBack[i].must
            this.questionInfo.optionContent = questionBack[i].optionContent
            this.questionInfo.textContent = ''
            this.questionInfo.choiceContent = []
            let it = JSON.parse(JSON.stringify(this.questionInfo))
            this.questionArray.push(it)
          }
          console.log(this.questionArray)

          const surveyBack = response.data.data.surveyInfo
          this.surveyInfo.id = surveyBack.id
          this.surveyInfo.title = surveyBack.title
          this.surveyInfo.introduction = surveyBack.introduction

        }else {
          this.$message.error("获取问卷信息失败")
          console.log(response.data.message)
        }
      })
    }


  },
  created() {
    // 得到
    this.answerId = JSON.parse(window.sessionStorage.getItem("data")).id
    this.surveyInfo.id = this.$route.query.surveyId
    //初始化问题数据，等后端有数据再放开
    this.getQuestionArray()

  }

}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.bbutton{
  width: 15%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: rgb(81, 133, 206);
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
  margin-bottom: 7px;
  margin-top: 7px;
}
.bbutton:hover{
  box-shadow: 0px 3px 3px 0px rgb(36, 59, 97);
}
.scrollbar{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.scrollbar /deep/ .is-horizontal {
  display: none;
}
.scrollbar :deep(.el-scrollbar__bar.is-horizontal){
   height: 0 !important;
}
.background{
  background-image: url("../../assets/answerbackground.png");
  background-size: 100% 100%;
  margin: 0;
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.background .big-contain{
  background-color: #f6f6f6;
  width: 60%;
  height: 92vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.buttonbar{
  height: 8vh;
  background-color: #f6f6f6;
  width: 60%;
  display: flex;
  flex-direction: row;
  align-content: space-around;
  justify-content: space-evenly;
}
.survey{
  background: #f6f6f6;
  border: #7c7c7c;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: medium;
}

</style>
